<template>
  <view class="forgotPassword">
    <view class="nesting">
      <image src="/static/login/nesting.png" mode="" />
    </view>
    <tabTopBar
      :title="t('forgotPassword.forgotPassword')"
      :bgColor="'transparent'"
    />

    <view class="forgotPassword-info">
      <view class="steps">
        <view class="steps-num">3</view>
        <!-- 重置密码 -->
        <view class="steps-text">{{
          t("forgotPassword.resetYourPassword")
        }}</view>
      </view>
      <up-form
        labelPosition="left"
        :model="passInfo"
        :rules="rules"
        ref="uFormRef"
      >
        <!-- 密码 -->
        <up-form-item prop="newPassword" borderBottom>
          <up-input
            v-model="passInfo.newPassword"
            type="password"
            class="forgotPassword-input"
            :placeholder="t('forgotPassword.pleaseEnterYourPassword')"
            color="#fff"
            prefixIconStyle="font-size: 40upx;color: #FFF"
            prefixIcon="lock"
          >
            <template #suffix>
              <text style="color: #fff">*</text>
            </template>
          </up-input>
        </up-form-item>
        <!-- 再次输入密码 -->
        <up-form-item prop="confirmPassword" borderBottom>
          <!-- placeholder="请再次输入密码" -->
          <up-input
            v-model="passInfo.confirmPassword"
            type="password"
            class="forgotPassword-input"
            :placeholder="t('forgotPassword.pleaseEnterYourPasswordAgain')"
            color="#fff"
            prefixIconStyle="font-size: 40upx;color: #FFF"
            prefixIcon="lock"
          >
            <template #suffix>
              <text style="color: #fff">*</text>
            </template>
          </up-input>
        </up-form-item>
        <up-form-item borderBottom>
          <!-- text="重置密码" -->
          <up-button
            type="primary"
            shape="circle"
            :text="t('forgotPassword.resetYourPassword')"
            @click="resetPassword"
          ></up-button>
        </up-form-item>
      </up-form>
    </view>
  </view>
</template>
<script setup>
import { ref, reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { useI18n } from "vue-i18n";
import apis from "@/apis/index.js";

const { t } = useI18n();
const uFormRef = ref(null);
const passInfo = reactive({
  newPassword: "",
  confirmPassword: "",
  email: "",
});

onLoad((options) => {
  passInfo.email = options.email;
});

const rules = reactive({
  newPassword: [
    {
      required: true,
      message: t("forgotPassword.pleaseEnterYourPassword"),
      trigger: ["blur"],
    },
    {
      validator: (rule, value, callback) => {
        if (value && value.length < 6) {
          callback(
            new Error(t("forgotPassword.passwordCannotBeLessThanSixCharacters"))
          );
        } else {
          callback();
        }
      },
      trigger: ["blur"],
    },
  ],
  confirmPassword: [
    {
      required: true,
      message: t("forgotPassword.passwordsDoNotMatch"),
      trigger: ["blur"],
    },
    {
      validator: (rule, value, callback) => {
        if (value !== passInfo.newPassword) {
          callback(new Error(t("forgotPassword.passwordsDoNotMatch")));
        } else {
          callback();
        }
      },
      trigger: ["blur"],
    },
  ],
});

const resetPassword = () => {
  uFormRef.value.validate().then((valid) => {
    if (valid) {
      apis.resetYourPassword(passInfo).then((res) => {
        uni.showToast({
          title: res.data,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: `/pages/outcomeType/outcomeType?
            title=${t("forgotPassword.thePasswordIsResetSuccessfully")}`,
          });
        }, 1000);
      });
    }
  });
};
</script>

<style scoped lang="scss">
.forgotPassword {
  width: 100%;
  height: 100vh;
  background: linear-gradient(180deg, #172c40, #08121e);
  padding: 0 30upx 50upx 30upx;
  box-sizing: border-box;
  .nesting {
    width: 960upx;
    height: 1320upx;
    position: absolute;
    top: -100upx;
    left: 145upx;
    /* 让点击事件穿透该元素 */
    pointer-events: none;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .forgotPassword-info {
    width: 100%;
    padding: 160upx 30upx 0 30upx;
    box-sizing: border-box;
    text-align: center;
    z-index: 99999999999;
    .steps {
      width: 100%;
      text-align: left;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 30rpx;
      .steps-num {
        width: 48rpx;
        height: 48rpx;
        background-color: #64b7f6;
        text-align: center;
        line-height: 48rpx;
        border-radius: 50%;
        margin-right: 18rpx;
      }
      .steps-text {
        font-family: Alibaba PuHuiTi 3;
        font-size: 32rpx;
        font-weight: 500;
        font-variation-settings: "opsz" auto;
        font-feature-settings: "kern" on;
        /* 白 */
        color: #ffffff;
      }
    }
    .forgotPassword-input {
      width: 100%;
      height: 88upx;
      background-color: #222d49;
      border-radius: 150upx;
      z-index: 1;
      padding: 0 36upx !important;
      box-sizing: border-box;
    }
    :deep(.u-form-item__body__right__message) {
      text-align: left;
    }
  }
}
</style>
